<template>
  <div id="awardListDialog">
    <el-dialog
      title="添加奖品"
      :visible.sync="awarddialog.isShow"
      width="580px"
      :before-close="HandleClose"
    >
      <el-row align="middle">
        <el-col :span="2">
          搜索奖品
        </el-col>
        <el-col :span="5">
          <el-input
            v-model="seach"
            size="small"
            placeholder="奖品名称、编号"
          ></el-input>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
          </template>
        </el-table-column>
        <el-table-column
          label="限时促销时间"
          prop="promotionTime"
          min-width="200"
        ></el-table-column>
        <el-table-column
          label="商品类型"
          prop="goodsType"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="商品编号"
          prop="goodsCode"
          min-width="90"
        ></el-table-column>
        <el-table-column
          label="商品基础名称"
          prop="goodsName"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="商品展示名称"
          prop="goodsDisName"
          min-width="100"
        ></el-table-column>
        <el-table-column label="商品图片" prop="goodsImage" min-width="130">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.goodsImage"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click.prevent="handleCancel"
          >取消</el-button
        >
        <el-button type="success" @click.prevent="HandleSave">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'awardListDialog',
  msg: '属性管理--添加奖品',
  props: ['awarddialog'],
  data: function() {
    return {
      loading: false,
      seach: '',
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      tableData: [
        {
          id: 1,
          promotionTime: '2019-12-23 12:00 23',
          goodsType: '听课劵',
          goodsCode: 'Hd0001',
          goodsName: 'PS功能精通课',
          goodsDisName: 'PS功能精通课',
          goodsImage:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 2,
          promotionTime: '2019-12-23 12:00 23',
          goodsType: '听课劵',
          goodsCode: 'Hd0001',
          goodsName: 'PS功能精通课',
          goodsDisName: 'PS功能精通课',
          goodsImage:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 3,
          promotionTime: '2019-12-23 12:00 23',
          goodsType: '听课劵',
          goodsCode: 'Hd0001',
          goodsName: 'PS功能精通课',
          goodsDisName: 'PS功能精通课',
          goodsImage:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          id: 4,
          promotionTime: '2019-12-23 12:00 23',
          goodsType: '听课劵',
          goodsCode: 'Hd0001',
          goodsName: 'PS功能精通课',
          goodsDisName: 'PS功能精通课',
          goodsImage:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
      ],
      multipleSelection: [] // 选中的商品
    }
  },
  mounted() {},
  methods: {
    // 关闭前
    HandleClose(done) {
      this.handleCancel()
      done()
    },
    // 关闭
    HandleCloseView() {
      this.handleCancel()
    },
    // 取消
    handleCancel() {
      this.loading = false
      this.awarddialog.isShow = false
    },
    // 选中多行
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 保存选中的商品
    HandleSave() {
      this.$emit('update', this.multipleSelection)
      this.awarddialog.isShow = false
    }
  }
}
</script>
<style lang="less">
#awardListDialog {
  @green: #1dc8a4;
  @green-light: rgba(29, 200, 164, 0.8);
  .el-dialog {
    //reset diogla style
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
    .el-dialog__footer {
      margin-top: 50px;
      padding: 10px;
      /*border-top: 1px solid #eeeeee;*/
    }
    //自定义
    .dialog-footer {
      .el-button {
        padding: 5px 30px;
        border-radius: 2px;
        font-family: 'Microsoft YaHei';
        font-size: 14px;

        &.el-button--primary {
          background-color: @green;
          border-color: @green;

          &:hover {
            background-color: @green-light;
          }
        }

        &.el-button--default {
          &:hover {
            border-color: @green;
            background-color: @green-light;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
